<template>
  <div class="container">
    <!-- 添加学校 -->
    <div>
      <el-button type="primary" size="mini" @click="addSchool">
        添加学校
      </el-button>
    </div>
    <!-- 搜索项 -->
    <div class="search_bar">
      <el-form size="small" :inline="true" label-width="68px">
        <el-form-item label="学校名称">
          <el-input
            v-model="sea_form.schoolName"
            placeholder="请输入学校名称"
            clearable
            @keyup.enter.native="getdataBysearch"
          />
        </el-form-item>
        <el-form-item class="search_btns">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getdataBysearch"
          >搜索
          </el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetSearch"
          >重置
          </el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- // 0.全部 1.已启用 2.已停用 3.已到期 -->
    <div class="commonMenu">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="0">全部</el-menu-item>
        <el-menu-item index="1">已启用</el-menu-item>
        <el-menu-item index="2">已停用</el-menu-item>
        <el-menu-item index="3">已到期</el-menu-item>
      </el-menu>
    </div>
    <el-table
      v-loading="loading"
      :data="postList"
    >
      <el-table-column
        show-overflow-tooltip
        label="学校编号"
        align="center"
        width="150"
        prop="schoolNum"
      />
      <el-table-column
        show-overflow-tooltip
        label="学校名称"
        align="center"
        width="300"
        prop="schoolName"
      />
      <el-table-column width="100" label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <!-- // 0.全部 1.已启用 2.已停用 3.已到期 -->
          <el-tag type="success" v-if="scope.row.status == 0">启用</el-tag>
          <el-tag type="info" v-if="scope.row.status == 2">已到期</el-tag>
          <el-tag type="danger" v-if="scope.row.status == 1">已停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="创建时间"
        align="center"
        width="150"
        prop="createTime"
      />
      <el-table-column
        show-overflow-tooltip
        label="截止时间"
        align="center"
        width="150"
        prop="deadlineDate"
      />
      <el-table-column
        show-overflow-tooltip
        label="资源库总量"
        align="center"
        width="100"
        prop="totalStorageSize"
      >
        <template slot-scope="scope">
          <!-- // 0.全部 1.已启用 2.已停用 3.已到期 -->
          <div>{{ scope.row.totalStorageSize }}GB</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="updateByid(scope.row)">基本信息</el-button>
          <el-button size="mini" type="text" @click="changeStatu(scope.row,scope.row.status)" v-if="scope.row.status==1">启用</el-button>
          <el-button size="mini" type="text" @click="changeStatu(scope.row,scope.row.status)" v-if="scope.row.status==0">停用</el-button>
          <!--          <el-button size="mini" type="text" @click="deleteByid(scope.row.id)" v-if="scope.row.status==2||scope.row.status==3">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="sea_form.pageNum"
      :limit.sync="sea_form.pageSize"
      @pagination="getList"
    />
    <UpdateDialog ref="updatedialog"></UpdateDialog>
  </div>
</template>
<script>
import UpdateDialog from '@/views/resourceLibrary/component/updateDialog.vue'
import { getLibrsrySchoolList, updatestoreStatus } from '@/api/library/librarySet'

export default {
  name: 'serviceConfiguration',
  components: { UpdateDialog },
  data() {
    return {
      loading: false,
      sea_form: {
        pageNum: 1,
        pageSize: 20,
        schoolName: '',
        schoolStatus: ''
      },
      schoolLevels: [],
      activeIndex: '0',
      postList: [],
      total: 25
    }
  },
  mounted() {
    this.loading = true
    this.getList()
  },
  methods: {
    async getList() {
      let res = await getLibrsrySchoolList(this.sea_form)
      this.loading = false
      if (res.code == 200) {
        this.postList = res.rows
        this.total = res.total
      }
    },

    addSchool() {
      this.$refs.updatedialog.show('add')
    },
    // 搜索
    getdataBysearch() {
      this.sea_form.pageNum = 1
      // 发送获取列表请求
      this.getList()
    },
    // 重置
    resetSearch() {
      this.sea_form = {
        pageNum: 1,
        pageSize: 10,
        schoolName: ''
      }
      this.getdataBysearch()
    },
    // 状态选择 查询列表
    handleSelect(key) {
      this.activeIndex = key
      this.sea_form.schoolStatus = key == 0 ? '' : key - 1
      this.getList()
    },
    updateByid(form) {
      this.$refs.updatedialog.show('update', form)
    },
    changeStatu(row, type) {
      this.$confirm(`确定${type == 1 ? '启用' : '停用'}${row.schoolName}的资源库权限吗？`, `${type == 1 ? '启用' : '停用'}确认`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        let res = await updatestoreStatus({ storageId: row.storageId, status: type == 0 ? 1 : 0 })
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: `${type == 1 ? '启用' : '停用'}成功`
          })
          this.getList()
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: `已取消${type == 1 ? '启用' : '停用'}`
        })
      })
    },
  }
}

</script>
<style scoped lang="scss">
.container {
  padding: 20px;
  box-sizing: border-box;
}

.search_bar {
  padding: 20px 20px 0 20px;
  background-color: #fafafa;
  margin: 20px 0 0;

  .search_btns {
    float: right;
  }
}
</style>
